<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slideshow</title>
    <style>
        body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background-color: #000; }
        #slideshow {
            width: 100%;
            height: 100%;
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
            transition: opacity 1s ease-in-out;
            opacity: 1;
        }
    </style>
</head>
<body>
    <div id="slideshow"></div>
    <script>
        // --- 您需要修改的地方在这里 ---

        // 1. 把您的图片文件名依次填入下面的列表中
        const images = [
            "1.jpg",
            "2.jpg",
            "3.jpg",
            "4.jpg",
            "5.jpg",
            "6.jpg",
            // 如果有更多图片，继续像上面一样添加，用逗号隔开
        ];

        // 2. (可选) 修改图片切换的间隔时间（单位是毫秒，5000 = 5秒）
        const DURATION = 5000;

        // --- 以下代码无需修改 ---

        const slideshowDiv = document.getElementById('slideshow');
        let currentIndex = 0;

        function changeImage() {
            slideshowDiv.style.opacity = 0; // 开始淡出
            setTimeout(() => {
                currentIndex = (currentIndex + 1) % images.length;
                slideshowDiv.style.backgroundImage = `url(${images[currentIndex]})`;
                slideshowDiv.style.opacity = 1; // 加载新图片后淡入
            }, 1000); // 等待淡出动画完成
        }

        // 初始加载第一张图
        if (images.length > 0) {
            slideshowDiv.style.backgroundImage = `url(${images[currentIndex]})`;
            if (images.length > 1) {
                setInterval(changeImage, DURATION);
            }
        }
    </script>
</body>
</html>